$color:#b532e9;

// 计步器样式
@mixin stepper-style {
  i {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
  }
  .minus {
    border: 2px solid $color;
    &::before {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60%;
      height: 1px;
      // height: .1rem;
      background: $color;
    }
  }
  .plus {
    background: $color;
    &::before {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60%;
      height: 1px;
      // height: .1rem;
      background: #fff;
    }
    &::after {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 60%;
      width: 1px;
      // width: .1rem;
      background: #fff;
    }
  }
}

.shop-cart {
  .shop-cart-container {
    position: fixed;
    top: 11.5vw;
    left: 0;
    right: 0;
    bottom: 13.5vw;
    .empty-cart {
      padding-top: 3rem;
      .cart-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 10rem;
        height: 10rem;
        margin: 0 auto;
        border-radius: 50%;
        background: #F2F2F2;
        .cart-img {
          width: 70%;
          height: 70%;
        }
      }
      .desc {
        text-align: center;
        font-size: 1.2rem;
        letter-spacing: .1rem;
        color: #666;
        margin: 1.5rem 0;
      }
      .go-shop, .login-btn {
        width: 10rem;
        height: 3rem;
        line-height: 3rem;
        text-align: center;
        letter-spacing: .1rem;
        margin: 0 auto;
        color: $color;
        border-radius: 2rem;
        border: 1px solid $color;
      }
    }
    .content-scroll {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 13vw;
      overflow: hidden;
      .container {
        .header {
          display: flex;
          justify-content: space-between;
          font-size: 4.5vw;
          padding: .5rem 1rem;
          .mark { 
            color: red;
            padding: 0 .3rem;
          }
        }
        .goods-list {
          .goods-item {
            display: flex;
            box-sizing: border-box;
            padding: 2vw;
            border-bottom: 1px solid #eee;
            .checked {
              display: flex;
              align-items: center;
              padding-right: 3vw;
            }
            .goods-left {
              flex-basis: 30%;
              img {
                width: 100%;
                height: 100%;
                box-shadow: 0 0.533vw 2.133vw #f0f1f2;
              }
            }
            .goods-right {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              padding-left: 3vw;
              .goods-name {
                letter-spacing: 0.01rem;
                line-height: 1.2;
              }
              .wrapper {
                display: flex;
                justify-content: space-between;
                padding-right: 5vw;
                vertical-align: middle;
                .goods-price {
                  color: $color; 
                  font-weight: 700;
                }
                .stepper {
                  display: flex;
                  align-items: center;
                  @include stepper-style;
                  span {
                    padding: 0 .8rem;
                  }
                }
              }
            }
          }
        }
      }
    }
    .calc-total-wrapper {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 13vw;
      display: flex;
      align-items: center;
      font-size: 4.5vw;
      padding: 0 2vw;
      .all-checked {
        display: flex;
        align-items: center;
        height: 13vw;
        padding-right: 3vw;
        span { margin-left: 2vw; }
      }
      .common-mge {
        flex: 1;
        display: flex;
        align-items: center;
        line-height: 13vw;
        span { padding-left: .5rem; }
        .total-price { color: red; }
      }
      .common-btn {
        min-width: 25%;
        box-sizing: border-box;
        padding: 0 .8rem;
        line-height: 11vw;
        border-radius: 2rem;
        text-align: center;
      }
      .calc-btn {
        color: #fff;
        background: $color;
      }
      .remove-btn {
        color: $color;
        border: 1px solid $color;
      }
    }
  }
}